<template>
    <div class="prog">
      <div class="item">
        <div class="top">
          <div class="content user " :class="{isIndex:isIndex[0]}"></div>
        </div>
        <div class="bottom " :class="{isIndex:isIndex[0]}">个人信息</div>
      </div>
      <div class="item">
        <div class="top">
          <div class="content suitcase " :class="{isIndex:isIndex[1]}"></div>
        </div>
        <div class="bottom " :class="{isIndex:isIndex[1]}">职业信息</div>
      </div>
      <div class="item">
        <div class="top">
          <div class="content parper" :class="{isIndex:isIndex[2]}"></div>
        </div>
        <div class="bottom" :class="{isIndex:isIndex[2]}">社会关系</div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "prog",
        props:{
          step:{
            type:Number,
            default:1
          }
        },
        data(){
          return{
            isIndex:[]
          }
        }
        ,mounted() {
          if(this.step===0){
            this.isIndex = [true,false,false]
          }else if(this.step===1){
            this.isIndex = [true,true,false]
          }else {
            this.isIndex = [true,true,true]
          }
      }
    }
</script>

<style scoped lang="stylus">
  .prog
    display flex
    height 88px
    background #ffffff
    text-align center
    margin 0 10px
    width calc(100% - 20px)
    z-index 100
    border-radius 6px
    box-shadow -2px 2px 5px rgba(160,160,160,.1)
    .item
      flex 1
      height 100%
      .top
        height 47px
        text-align center
        padding-top 12px
        .content
          height 35px
          width 35px
          margin 0 auto
          border-radius 50%
          &.user
            background url("user.svg")no-repeat center #D8D8D8/20px
            &.isIndex
              background url("user.svg")no-repeat center #49A2FE/20px
          &.suitcase
            background url("suitcase.svg")no-repeat center #D8D8D8/20px
            &.isIndex
              background url("suitcase.svg")no-repeat center #49A2FE/20px
          &.parper
            background url("parper.svg")no-repeat center #D8D8D8/18px
            &.isIndex
              background url("parper.svg")no-repeat center #49A2FE/20px


      .bottom
        height 27px
        line-height 27px
        color #919191
        font-size 14px
        &.isIndex
          color #333333


</style>
